<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body onload="document.getElementById('p').innerHTML='改变咯'">
		
		<h1 onclick="this.innerHTML='Ooops!'">点击文本！</h1>
		<h1 onclick="p1(this)">点击文本!</h1>
		<h1 id="h1">点击文本！</h1>
		
		<p id="p">开始改变</p>
		
		<div onmouseover="p2(this)" onmouseout="p3(this)">
			
		</div>
		
		<input type="text" id="fname" onchange="upperCase(this)"/>
		
		<script>
			function p1(id){
				id.innerHTML='Ooops!';
			}
			
			//使用 HTML DOM 来分配事件
			document.getElementById("h1").onclick = function(){
				document.getElementById("h1").innerHTML='Ooops!';
			}
			
			function upperCase(input){
				console.log(input.value);
			}
			
			function p2(div){
				div.style.backgroundColor = "red";
			}
			
			function p3(div){
				div.style.backgroundColor = "aqua";
			}
		</script>
	</body>
</html>